<!-- 评分属性设置 -->
<template>
  <div>
    <div class="title">评分</div>
    <Form :model="formDesc" :rules="ruleValidate" ref="form" :label-width="100">
      <Row :gutter="12" class="code-row-bg">
        <Col span="16">
          <Form-item prop="numberType" label="格式" :label-width="100">
            <Select style="width: 100%" transfer placeholder="请选择" v-model="formDesc.numberType">
              <Option v-for="item in formatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="20">
          <Form-item label="是否必填" prop="scoreRequire" :label-width="100">
            <RadioGroup v-model="formDesc.scoreRequire">
              <Radio :label="1">必填</Radio>
              <Radio :label="0">非必填</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Divider />
      <div class="title">评分说明</div>
      <Row :gutter="32">
        <Col span="20">
          <Form-item prop="field" :label="'字段类型'">
            <Select disabled placeholder="请选择" v-model="formDesc.type">
              <Option :value="0">单行文本</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="12" class="code-row-bg">
        <Col span="20">
          <Form-item prop="maxlength" label="最大长度" :label-width="100">
            <InputNumber v-model="formDesc.maxlength" :active-change="false" :min="0"></InputNumber>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="20">
          <Form-item label="是否必填" prop="scoreDesReq" :label-width="100">
            <RadioGroup v-model="formDesc.scoreDesReq">
              <Radio :label="1">必填</Radio>
              <Radio :label="0">非必填</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formDesc: {
        numberType: 0,
        scoreRequire: 1,
        type: 0,
        maxlength: 300,
        scoreDesReq: 0
      },
      formatList: [
        { label: '整数', value: 0 },
        { label: '保留1位小数', value: 1 },
        { label: '保留2位小数', value: 2 },
      ],
      ruleValidate: {
        numberType: [{ required: true, message: '请选择字段格式', trigger: 'blur' }],
        scoreRequire: [{ required: true, message: '请选择是否必填', trigger: 'blur' }],
        field: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
        maxlength: [{ required: true, type: 'number', message: '请输入最大长度', trigger: 'blur' }],
        scoreDesReq: [{ required: true, message: '请选择是否必填', trigger: 'blur' }],
      }
    }
  },
  props: {
    attributes: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    setPageActions() {
      this.$emit('SetPageActions', [
        {
          text: '确定',
          theme: 'primary',
          handle: () => {
            this.$emit('Close', this.formDesc)
          }
        },
        {
          text: '取消',
          handle: () => {
            this.$emit('Close')
          }
        }
      ])
    }
  },
  created() {
    this.$emit('SetTitle', '指标属性设置')
    this.$emit('SetPageMinHeight', 150)
    this.setPageActions()
    if (Object.keys(this.attributes).length) {
      this.formDesc = this.attributes
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 18px;
  font-weight: 600;
  color: #f89c34;
  padding-bottom: 10px;
}
</style>